/** @author: duanhaijiao  @date 2022/7/6--15:56 **/

/* name: "search" */
<template>
    <div class="search-box flex flex-align-center flex-space-between" @click="toSearch">
                <span>
                    输入关键字搜索
                </span>
        <div class="flex flex-align-center" style="justify-content: center">
            <i class="el-icon-search"></i>
        </div>
    </div>


</template>

<script>
    export default {
        name: "search",
        data() {
            return {
                keyWord: '',
                ishow: false,
            }
        },
        mounted() {

        },
        methods: {
            toSearch() {
                if (this.$route.path != '/searchResult') {
                    this.$router.push('/searchResult')
                }

            },
            clearValue() {
                if (!this.ishow) {
                    this.$refs.searchinput.focus()
                }
                this.ishow = !this.ishow
                this.keyWord = ''
            }
        }
    };
</script>

<style lang="scss">

    .search-box {
        width: 200px;
        border: 1px solid #2B699B;
        height: 30px;
        border-radius: 30px;

        > span {
            font-size: 12px;
            margin-left: 20px;
        }

        > div {
            width: 50px;
            height: 92%;
            background: #245794;
            margin-right: 2px;
            color: #fff;
            font-size: 20px;
            border-radius: 30px;
        }
    }

    .container {
        /*transform: scale(0.6);*/
        position: absolute;
        margin: auto;
        top: 0;
        left: 0px;
        right: 0;
        bottom: 0;
        width: 300px;
        height: 100px;
    }

    .container .search {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0px;
        bottom: 0;
        left: 0;
        width: 70px;
        height: 70px;
        background: #155598;
        border-radius: 50%;
        transition: all 0.05s;
        z-index: 6;
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
    }

    .container .search:hover {
        cursor: pointer;
    }

    .container .search::before {
        content: "";
        position: absolute;
        margin: auto;
        top: 22px;
        right: 0;
        bottom: 0;
        left: 22px;
        width: 12px;
        height: 2px;
        background: white;
        transform: rotate(45deg);
        transition: all 0.05s;
    }

    .container .search::after {
        content: "";
        position: absolute;
        margin: auto;
        top: -5px;
        right: 0;
        bottom: 0;
        left: -5px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 2px solid white;
        transition: all 0.05s;
    }

    .container input {
        font-family: 'Inconsolata', monospace;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: -30px;
        width: 0px;
        height: 0px;
        outline: none;
        border: 2px solid crimson;
        background: rgba(255, 255, 255, 0.4100);;
        color: #111;
        text-shadow: 0 0 0px #000;
        padding: 0 80px 0 20px;
        border-radius: 30px;
        /*box-shadow: 0 0 5px 0 rgba(255,255,255,0.4100), 0 5px 5px 0 rgba(0, 0, 0, 0.2);*/
        transition: all 0.7s;
        opacity: 0;
        z-index: 5;
        font-size: 24px;
        font-weight: bolder;
        letter-spacing: 0.1em;
    }

    .container input:hover {
        cursor: pointer;
    }

    .container input:focus {
        width: 400px;
        height: 60px;
        left: -444px;
        opacity: 1;
        cursor: text;
    }

    .container input:focus ~ .search {
        right: 0px;
        background: crimson;
        z-index: 6;
    }

    .container input:focus ~ .search::before {
        top: 0;
        left: 0;
        width: 25px;
    }

    .container input:focus ~ .search::after {
        top: 0;
        left: 0;
        width: 25px;
        height: 2px;
        border: none;
        background: white;
        border-radius: 0%;
        transform: rotate(-45deg);
    }

    .container input::placeholder {
        color: crimson;
        opacity: 0.5;
        font-weight: bolder;
    }
</style>
